{{extend name="layout/base-html"}}

{{block name="body"}}
<style>
    /** 行高自适应 **/
    .layui-table-cell {
        height: inherit;
    }
</style>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">

                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="keyWord" placeholder="请输入配置名称" autocomplete="off"
                                   class="layui-input"></div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="search">
                                <i class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>

                </div>
                <div class="layui-card-body ">
                    <table id="table" lay-filter="table"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="value">
    {{# if(d.type == 1) { }}

        <div class="table__cell-img">
            <img src="{{d.value}}" alt="">
        </div>

    {{# }else { }}

        <span>{{d.value}}</span>

    {{# } }}


</script>

<script type="text/html" id="action-button">
    <a href="javascript:;" lay-event="edit" title="编辑"><i class="layui-icon">&#xe642;</i></a>
</script>

<script type="module">
    import { edit } from "/static/admin/js/api/additional/config.js";
    import { rain } from "/static/admin/js/app.js";
    import { getDomain } from "/static/admin/js/request.js";

    layui.use(['table', 'laydate'], () => {
        let table = layui.table,
            form = layui.form;

        // 表格筛选
        table.render({
            ...rain.config.table

            ,url: getDomain() + '{{$configType}}' //数据接口

            ,defaultToolbar: []

            ,cols: [[ //表头
                {field: 'id', title: 'ID', sort: true}
                ,{field: 'name', title: '名称'}
                ,{field: 'value', title: '值', templet: '#value', align: 'center'}
                ,{field: 'description', title: '描述'}
                ,{field: 'create_time', title: '创建时间'}
                ,{fixed: 'right', title:'操作', toolbar: '#action-button', width:150}
            ]],
            id: 'table-reload',
        });

        // 初始化配置
        rain.tableAction.init = { form, table };

        // 筛选
        rain.tableAction.search('table-reload');

        //监听行工具事件
        table.on('tool(table)', function (obj) {
            var data = obj.data;

            if (obj.event === 'edit') {
                edit('{{$configType}}', data.id);
            }
        });
    });


</script>
{{/block}}
